﻿@model RegisterModel
@using SmartStore.Web.Models.Customer;
@{
    Layout = "_Layout";
    Html.AddTitleParts(T("PageTitle.Register").Text);
}

@using (Html.BeginForm("Register", "Customer", new { returnUrl = this.Context.Request.QueryString["returnUrl"] }, FormMethod.Post, new { @class = "form-horizontal" }))
{
    @Html.AntiForgeryToken()

    <div class="page registration-page">
        <div class="page-title">
            <h1 class="h3">@T("Account.Register")</h1>
        </div>

        <div class="page-body row">
            
			<div class="col-12 col-lg-9 col-xl-8">
				@if (!ViewData.ModelState.IsValid)
				{
					@Html.ValidationSummary(true, "", new { @class = "alert alert-danger" })
				}

				@{ Html.RenderPartial("_ExternalAuthentication.AssociateMessage"); }

				<fieldset class="content-group">
					<legend><span>@T("Account.YourPersonalDetails")</span></legend>

					@if (this.EnableHoneypotProtection)
					{
						<div class="d-none">
							@Html.HoneypotField()
						</div>
					}

					@if (Model.GenderEnabled)
					{
						<div class="form-group row">
							<label class="col-md-3 col-form-label">@T("Account.Fields.Gender")</label>
							<div class="col-md-9 form-inline">
								<div class="form-check form-check-inline">
									@Html.RadioButton("Gender", "M", (Model.Gender == "M"), new { @class = "form-check-input", id = "gender-male" })
									<label class="form-check-label" for="gender-male">@T("Account.Fields.Gender.Male")</label>
								</div>
								<div class="form-check form-check-inline">
									@Html.RadioButton("Gender", "F", (Model.Gender == "F"), new { @class = "form-check-input", id = "gender-female" })
									<label class="form-check-label" for="gender-female">@T("Account.Fields.Gender.Female")</label>
								</div>
							</div>
						</div>
					}

					@Html.ControlGroupFor(model => model.FirstName, required: Model.FirstNameRequired, breakpoint: "md")
					@Html.ControlGroupFor(model => model.LastName, required: Model.LastNameRequired, breakpoint: "md")

					@if (Model.DateOfBirthEnabled)
					{
						<div class="form-group row">
							<label class="col-md-3 col-form-label" for="DateOfBirthDay">@T("Account.Fields.DateOfBirth")</label>
							<div class="col-md-9">
								@Html.DatePickerDropDowns(Html.FieldNameFor(x => x.DateOfBirthDay),
									Html.FieldNameFor(x => x.DateOfBirthMonth),
									Html.FieldNameFor(x => x.DateOfBirthYear),
									DateTime.Now.Year - 110,
									DateTime.Now.Year,
									Model.DateOfBirthDay,
									Model.DateOfBirthMonth,
									Model.DateOfBirthYear)
								@Html.ValidationMessageFor(model => model.DateOfBirthDay)
								@Html.ValidationMessageFor(model => model.DateOfBirthMonth)
								@Html.ValidationMessageFor(model => model.DateOfBirthYear)
							</div>
						</div>
					}

					@Html.ControlGroupFor(model => model.Email, required: true, breakpoint: "md")

					@if (Model.UsernamesEnabled)
					{
						<div class="form-group row">
							@Html.LabelFor(model => model.Username, new { @class = "col-md-3 col-form-label required", @for = "Username" })
							<div class="col-md-9">
								@if (Model.CheckUsernameAvailabilityEnabled)
								{
									<div class="input-group">
										@Html.TextBoxFor(model => model.Username, new { @class = "form-control" })
										@{ Html.RenderPartial("_CheckUsernameAvailability"); }
									</div>
								}
								else
								{
									@Html.TextBoxFor(model => model.Username, new { @class = "form-control" })
								}
								@Html.ValidationMessageFor(model => model.Username)
							</div>
						</div>
					}

					@{ Html.RenderWidget("gdpr_consent"); }

				</fieldset>

				<fieldset class="content-group">
					<legend><span>@T("Account.YourPassword")</span></legend>

					@Html.ControlGroupFor(model => model.Password, editorType: InputEditorType.Password, required: true, breakpoint: "md")
					@Html.ControlGroupFor(model => model.ConfirmPassword, editorType: InputEditorType.Password, required: true, breakpoint: "md")

					@if (Model.DisplayCaptcha)
					{
						<div class="form-group row">
							<div class="captcha-box col-md-9 offset-md-3">
								@Html.Raw(Html.GenerateCaptcha())
							</div>
						</div>
					}
				</fieldset>

				@if (Model.CompanyEnabled || Model.DisplayVatNumber)
				{
					<fieldset class="content-group">
						<legend><span>@T("Account.CompanyDetails")</span></legend>

						@if (Model.CompanyEnabled)
						{
							@Html.ControlGroupFor(model => model.Company, required: Model.CompanyRequired, breakpoint: "md")
						}
						@if (Model.DisplayVatNumber)
						{
							<div class="form-group row">
								@Html.LabelFor(model => model.VatNumber, new { @class = "col-md-3 col-form-label" + (Model.VatRequired ? " required" : ""), @for = "VatNumber" })
								<div class="col-md-9">
                                    <div class="input-group">
                                        
                                        @Html.TextBoxFor(model => model.VatNumber, new { @class = "form-control", placeholder = (Model.VatRequired ? "" : T("Common.Optional").Text) })
                                        @Html.ValidationMessageFor(model => model.VatNumber)

                                        @if (Model.VatNumberStatusNote.HasValue())
                                        {
                                            <div class="input-group-append"><span class="input-group-text">@Model.VatNumberStatusNote</span></div>
                                        }
                                    </div>
									<div class="form-text text-muted vat-note">@T("Account.Fields.VatNumber.Note")</div>
								</div>
							</div>
						}

					</fieldset>
				}

				@if (Model.StreetAddressEnabled || Model.StreetAddress2Enabled || Model.ZipPostalCodeEnabled || Model.CityEnabled || Model.CountryEnabled)
				{
					<fieldset class="content-group">
						<legend><span>@T("Account.YourAddress")</span></legend>

						@if (Model.StreetAddressEnabled)
						{
							@Html.ControlGroupFor(model => model.StreetAddress, required: Model.StreetAddressRequired, breakpoint: "md")
						}
						@if (Model.StreetAddress2Enabled)
						{
							@Html.ControlGroupFor(model => model.StreetAddress2, required: Model.StreetAddress2Required, breakpoint: "md")
						}
						@if (Model.ZipPostalCodeEnabled)
						{
							@Html.ControlGroupFor(model => model.ZipPostalCode, required: Model.ZipPostalCodeRequired, breakpoint: "md")
						}
						@if (Model.CityEnabled)
						{
							@Html.ControlGroupFor(model => model.City, required: Model.CityRequired, breakpoint: "md")
						}
						@if (Model.CountryEnabled)
						{
							<div class="form-group row">
								@Html.LabelFor(model => model.CountryId, new { @class = "col-md-3 col-form-label", @for = "CountryId" })
								<div class="col-md-9">
									@Html.DropDownList("CountryId", Model.AvailableCountries,
										new
										{
											@class = "form-control country-input country-selector",
											data_region_control_selector = "#StateProvinceId",
											data_states_ajax_url = Url.Action("GetStatesByCountryId", "Country"),
											data_addEmptyStateIfRequired = "true"
										})
								</div>
							</div>
						}
						@if (Model.CountryEnabled && Model.StateProvinceEnabled)
						{
							<div class="form-group row">
								@Html.LabelFor(model => model.StateProvinceId, new { @class = "col-md-3 col-form-label", @for = "StateProvinceId" })
								<div class="col-md-9">
									@Html.DropDownList("StateProvinceId", Model.AvailableStates, new { @class = "form-control" })
								</div>
							</div>
						}
					</fieldset>
				}

				@if (Model.PhoneEnabled || Model.FaxEnabled)
				{
					<fieldset class="content-group">
						<legend><span>@T("Account.YourContactInformation")</span></legend>

						@if (Model.PhoneEnabled)
						{
							@Html.ControlGroupFor(model => model.Phone, required: Model.PhoneRequired, breakpoint: "md")
						}
						@if (Model.FaxEnabled)
						{
							@Html.ControlGroupFor(model => model.Fax, required: Model.FaxRequired, breakpoint: "md")
						}

					</fieldset>
				}

				@if (Model.NewsletterEnabled)
				{
					<fieldset class="content-group">
						<legend><span>@T("Account.Options")</span></legend>
						<div class="form-group row">
							<div class="col">
								<div class="form-check">
									@Html.EditorFor(model => model.Newsletter, new { @class = "form-check-input" })
									<label class="form-check-label" for="Newsletter">
										@T("Account.Fields.Newsletter", Url.Topic("PrivacyInfo"))
									</label>
								</div>
							</div>
						</div>
					</fieldset>
				}

				@if (Model.AllowCustomersToSetTimeZone)
				{
					<fieldset class="content-group">
						<legend><span>@T("Account.Preferences")</span></legend>

						@if (Model.AllowCustomersToSetTimeZone)
						{
							<div class="form-group row">
								@Html.LabelFor(model => model.TimeZoneId, new { @class = "col-md-3 col-form-label", @for = "TimeZoneId" })
								<div class="col-md-9">
									@Html.DropDownList("TimeZoneId", Model.AvailableTimeZones, new { @class = "form-control" })
									@Html.ValidationMessageFor(model => model.TimeZoneId)
								</div>
							</div>
						}
					</fieldset>
				}

                <div class="form-group row">
                    <div class="col-12 text-muted">
                        @T("Common.FormFields.Required.Hint")
                    </div>
                </div>

				<div class="form-group row">
					<div class="col">
						<button type="submit" class="btn btn-primary btn-lg" name="register-button">
							@T("Account.Register.Button")
						</button>
					</div>
				</div>
			</div>
        </div>
    </div>
}
